<template>
  <div class="contain">
    <div class="layout" v-for="(item,index) in list" :key="index">
    <div class="learn_tab">
      <div class='lay_left'>{{item.title}}</div>
      <div class="lay_right">...</div>
    </div>

    <div class="learn_content" v-for="(res,index) in item.data" :key="index" @click="checkDetail">
      <span class="status">{{res.status}}</span>
      <div class="lear_bottom">
        <span class="impot_thing">{{res.watchout}}</span>
        <span class="time">{{res.time}}</span>
        <span class="place">{{res.place}}</span>
      </div>
    </div>

  </div>
 </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            title: '我学习的课程',
            data: [
              {
                status: '进行中',
                watchout: '化妆中需要注意那些事项',
                time: '6月6日 — 6月9日',
                place: '上海'
              },
              {
                status: '进行中',
                watchout: '化妆中需要注意那些事项',
                time: '6月6日 — 6月9日',
                place: '上海'
              },
              {
                status: '进行中',
                watchout: '化妆中需要注意那些事项',
                time: '6月6日 — 6月9日',
                place: '上海'
              }
            ]
          },
          {
            title: '我教授的课程',
            data: [
              {
                status: '未开始',
                watchout: '化妆中需要注意那些事项',
                time: '6月7日 — 6月10日',
                place: '合肥'
              },
              {
                status: '进行中',
                watchout: '化妆中需要注意那些事项',
                time: '6月6日 — 6月9日',
                place: '上海'
              },
              {
                status: '进行中',
                watchout: '化妆中需要注意那些事项',
                time: '6月6日 — 6月9日',
                place: '上海'
              }
            ]
          }
        ]
      }
    },
    methods: {
      // 跳转到offineSession
      checkDetail() {
        this.$router.push('/offine')
      }
    }
  }
</script>
<style lang="less">
  .contain{
    width: 100%;
    background: #f5f5f5;
  }
  .layout {
    padding:15px;
    margin: 0 auto;
    margin-bottom: 13px;
    background: #fff;
    // padding-bottom: 15px;
  }
  .learn_tab {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    line-height: 53px;
    border-bottom: 1px #c0c0c0 solid;
    font-size: 13px;
    color: #c11613;
    .lay_right {
      color: #c0c0c0;
    }
  }

  .learn_content{
      width: 100%;
      height: 175px;
      background: greenyellow;
      color: #fff;
      margin-top: 15px;
      position: relative;
      .status{
        position: absolute;
        font-size: 12px;
        font-weight: 600;
        top:0;
        right:8px;
        width: 45px;
        line-height: 26px;
        background: #b23d3b;
      }
      .lear_bottom{
        width: 100%;
        // background: #b23d3b;
        position: absolute;
        bottom:8px;
        left:0;
        .impot_thing{
          font-size: 13px;
          font-weight: 500;
          margin-left: 13px;
          margin-right: 30px;
        }
        .time{
          letter-spacing: 3px;
         }
        .time,.place{
          font-size: 6px;
          font-weight: 500;
          margin-right: 10px;
        }
      }
    }

</style>
